<template>
  <view class="allContainer">
    <view class="itemContainer">
      <view class="itemContentText"
        ><text>{{ itemObj.id }}.{{ itemObj.questionName }}</text></view
      >
      <view class="itemRadioBtn">
        <view
          :class="{
            mark: true,
            before: radioIndex < 3,
            middle: radioIndex == 3,
            after: radioIndex > 3,
            'before-selected':
              radioIndex < 3 && itemObj.questionAnswer == radioIndex + 1,
            'middle-selected':
              radioIndex == 3 && itemObj.questionAnswer == radioIndex + 1,
            'after-selected':
              radioIndex > 3 && itemObj.questionAnswer == radioIndex + 1
          }"
          v-for="(item, radioIndex) in 7"
          :key="radioIndex"
          @click.stop="handleClick(item, radioIndex)"
        >
        </view>
      </view>
      <view class="itemRadioText"
        ><text style="color: #72b579; fontsize: 14px; margin-left: 12rpx"
          >同意</text
        >
        <text style="color: #999999; fontsize: 14px">中立</text>
        <text style="color: #8f82bc; fontsize: 14px; margin-right: 12rpx"
          >反对</text
        >
      </view>
    </view>
    <view v-if="borderIndex" class="bottomLine"></view>
  </view>
</template>

<script>
import { submitAnswer } from '@/api/modules/activity';
export default {
  props: {
    itemIndex: {
      type: Number,
      default: 0
    },
    borderIndex: {
      type: Boolean,
      default: true
    },

    itemObj: {
      type: Object,
      default: function () {
        return {
          questionAnswer: '',
          optionValue: '',
          sortOrder: 1,
          id: 1,
          questionName: '',
          questionType: 0 //题目类型，0判断题，1选择题，2音乐题，3图片题
        };
      }
    }
  },

  data() {
    return {
      selectIndex: -1
    };
  },
  created() {
    this.resultId = wx.getStorageSync('assessmentId');
  },

  methods: {
    handleClick(item, radioIndex) {
      // console.log("item", item);
      this.itemObj.questionAnswer = radioIndex + 1;
      // console.log(
      //   "questionAnswer",
      //   this.itemObj.questionAnswer,
      //   "radioIndex",
      //   radioIndex,
      //   "item",
      //   this.item
      // );
      this.$emit('clickBack', {
        questionId: this.itemObj.id,
        answerValue: this.itemObj.questionAnswer,
        itemIndex: this.itemIndex
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.allContainer {
  display: flex;
  flex-direction: column;
  padding-left: 20rpx;
  padding-right: 20rpx;

  .itemContainer {
    display: flex;
    flex-direction: column;
    padding-left: 32rpx;
    padding-right: 32rpx;

    .itemContentText {
      padding-top: 60rpx;
      font-size: 32rpx;
      align-items: center;
      color: #000000;
    }
    .itemRadioBtn {
      margin-top: 40rpx;
      margin-bottom: 14rpx;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .mark {
      padding-left: 16rpx;
      background-size: contain;
    }
    .mark:nth-of-type(1) {
      height: 80rpx;
      width: 80rpx;
    }
    .mark:nth-of-type(2) {
      height: 64rpx;
      width: 64rpx;
    }
    .mark:nth-of-type(3) {
      height: 48rpx;
      width: 48rpx;
    }
    .mark:nth-of-type(4) {
      height: 48rpx;
      width: 48rpx;
    }
    .mark:nth-of-type(5) {
      height: 48rpx;
      width: 48rpx;
    }
    .mark:nth-of-type(6) {
      height: 64rpx;
      width: 64rpx;
    }
    .mark:nth-of-type(7) {
      height: 80rpx;
      width: 80rpx;
    }
    .before {
      //同意
      background-image: url($img-base + 'career/vocationalAssessmentQuestion/agree_unchecked_big.png');
    }
    .before-selected {
      //同意选中
      background-image: url($img-base + 'career/vocationalAssessmentQuestion/agree_checked_big.png');
    }
    .middle {
      //中立
      background-image: url($img-base + 'career/vocationalAssessmentQuestion/neutrality.png');
    }
    .middle-selected {
      //中立选中
      background-image: url($img-base + 'career/vocationalAssessmentQuestion/neutrality_checked.png');
    }
    .after {
      //反对
      background-image: url($img-base + 'career/vocationalAssessmentQuestion/disagree_unchecked_big.png');
    }
    .after-selected {
      //反对选中
      background-image: url($img-base + 'career/vocationalAssessmentQuestion/disagree_checked_big.png');
    }
    .itemRadioText {
      display: flex;
      justify-content: space-between;
      padding-bottom: 60rpx;
    }
  }
  .bottomLine {
    border: none;
    border-bottom: 1rpx solid #bad1ad;
  }
}
</style>
